<!DOCTYPE html>
<video preload=none poster='../../banners/image-512px.png'>
  <source src='../bigbuck.webm' type='video/webm'>
</video>
<script>
  const video = document.querySelector('video');

  async function enterPictureInPicture() {
    await video.play();
    await video.requestPictureInPicture();

    video.addEventListener('leavepictureinpicture', () => {
      document.title = 'leavepictureinpicture';
    }, { once: true });

    return true;
  }

  async function changeSrcAndLoad() {
    document.querySelector('source').src = '../bear-640x360-av-enc_av.webm';
    video.load();
    await _waitForMetadata();
    return true;
  }

  function _waitForMetadata() {
    return new Promise(resolve => {
      if (video.readyState >= HTMLMediaElement.HAVE_METADATA) {
        resolve();
        return;
      }

      video.addEventListener('loadedmetadata', () => {
        resolve();
      }, { once: true });
    });
  }

  function isInPictureInPicture() {
    return document.pictureInPictureElement == video;
  }
</script>
